<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>水表管理信息</title>
	<link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">

	<link rel="stylesheet" href="${request.contextPath}/statics/css/suo/master.css">

	<script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
	<script src="${request.contextPath}/statics/js/modules/suo/echarts.min.js"></script>

	<script src="${request.contextPath}/statics/plugins/layer/layer.js"></script>
	<script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>

	<script src="${request.contextPath}/statics/libs/vue.min.js"></script>
	<script src="${request.contextPath}/statics/plugins/jqgrid/grid.locale-cn.js"></script>
	<script src="${request.contextPath}/statics/plugins/jqgrid/jquery.jqGrid.min.js"></script>
	<script src="${request.contextPath}/statics/js/common.js"></script>

</head>
<body scroll="auto">
<div class='wrapper' id="rrapp" v-cloak>
	<div class='container'>
		<div class='header'>
			<div class='date'><b id="showDate"></b></div>
		</div>
		<div class='main'>
			<div class="main_ltop">
				<div class='left'>
					<div class='date'>
						<div class='info'>
							<div class='title'>水表信息统计</div>
						</div>
						<div class='main'>
							<div id ="sub_chart_1" style="width:100%;height:100%;"></div>
						</div>
					</div>
					<div class='date'>
						<div class='info'>
							<div class='title'>网点表信息统计</div>
						</div>
						<div class='main'>
							<div id ="sub_chart_2" style="width:100%;height:100%;"></div>
						</div>
					</div>
					<div class='date'>
						<div class='info'>
							<div class='title'>故障类型统计</div>
						</div>
						<div class='main'>
							<div id ="sub_chart_3" style="width:100%;height:100%;"></div>
						</div>
					</div>
				</div>
				<div class='middle'>
					<div class='mtop'>
						<div class='suo'>{{suoName}}</div>
						<div class='online_rate'>{{suoTongJi.ganShi}}</div>
						<div class='temperature'>{{suoTongJi.shiShi}}</div>
						<div class='total'>{{suoTongJi.zongShu}}</div>
						<div class='online'>{{suoTongJi.shangYe}}</div>
						<div class='offline'>{{suoTongJi.wangDian}}</div>
					</div>
				</div>

				<div class='mend'>
					<div class='function'>居民表售后联系人</div>
					<div class='date'><img src="${request.contextPath}/statics/images/suo/pic.png" border="0"/></div>
					<div class='connection'>王宏</div>
					<div class='online'>报修：13998088808</div>
					<div class='offline'>监督：13998088808</div>
				</div>
				<div class='mend1'>
					<div class='function'>网点表售后联系人</div>
					<div class='date'><img src="${request.contextPath}/statics/images/suo/pic.png" border="0"/></div>
					<div class='connection'>王宏</div>
					<div class='online'>报修：13998088808</div>
					<div class='offline'>监督：13998088808</div>
				</div>
			</div>

			<div class='right'>
				<div class='date'>
					<div class='info'>
						<div class='title'>水表故障信息统计</div>
					</div>
					<div class='main'>
						<div id ="sub_chart_4" style="width:100%;height:100%;"></div>
					</div>
				</div>
				<div class='date'>
					<div class='info'>
						<div class='title'>本周故障率小区排名</div>
					</div>
					<div class='main'>
						<div id ="sub_chart_5" style="width:100%;height:100%;text-align: center;color:white;">
							<table border="0" width="90%" height="100%">
								<tr v-for="(item,index) in guZhangTop5" style="height:20%">
									<td><img :src="'${request.contextPath}/statics/images/suo/'+ (index+1) +'.png'"></td>
									<td v-text="item.name" style="text-align: left;"></td>
									<td v-text="item.rate"></td>
								</tr>
							</table>
						</div>
					</div>
				</div>
				<div class='date'>
					<div class='info'>
						<div class='title'>新增故障统计</div>
					</div>
					<div class='main'>
						<div id ="sub_chart_6" style="width:100%;height:100%;">
							<div class="firstcenRight">
								<div class="flag">
									<strong>35</strong>
									<p>当日新增</p>
								</div>
								<div class="flag">
									<strong>35</strong>
									<p>当月新增</p>
								</div>
								<div class="flag">
									<strong>35</strong>
									<p>当年新增</p>
								</div>
							</div>
<!--
							<div class="guzhangri"></div>
							<div class="guzhangyue"></div>
							<div class="guzhangnian"></div>
							-->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function () {
		// 每隔1000毫秒（1秒）刷新一次
		setInterval("showTime()", 1000);
	})

	function showTime() {
		/* 获取当前时间 */
		var date = new Date();
		/* 由上至下为年、月、日、时、分、秒 */
		var year = date.getFullYear();
		var month = date.getMonth() + 1;
		var day = date.getDate();
		var hour = date.getHours();
		var minute = date.getMinutes();
		var second = date.getSeconds();

		/* 格式化分、秒，如果小于10则在前面拼接一个0 */
		minute = minute < 10 ? "0" + minute : minute;
		second = second < 10 ? "0" + second : second;

		/* 拼接日期、时间 */
		var showDate = year + "年" + month + "月" + day + "日" + hour + ":" + minute + ":" + second;

		/* 展示 */
		$('#showDate').html(showDate);
	}
</script>
<script src="${request.contextPath}/statics/js/modules/suo/main.js?_${.now?long}"></script>
</body>
</html>
